<template>
	<view class="wrap"> 
		<div class="search-wrap">
			<div class="search-para uni-flex">
				<p class="para-title">
					产品:
				</p>
				<div class="para-content">
					<p class="condition-item" :class="searchData.productType=='ring'?'selected-item':''" @click="searchData.productType='ring';search()">企业彩铃</p>
					<p class="condition-item" :class="searchData.productType=='qwvedio'?'selected-item':''" @click="searchData.productType='qwvedio';search()">视频彩铃</p>
				</div>
			</div>
			<div class="search-para uni-flex">
				<p class="para-title">
					类型:
				</p>
				<div class="para-content">
					<p class="condition-item" :class="searchData.fileType==''?'selected-item':''" @click="searchData.fileType='';search()">全部</p>
					<p class="condition-item" :class="searchData.fileType==1?'selected-item':''" @click="searchData.fileType=1;search()">图片</p>
					<p class="condition-item" :class="searchData.fileType==2?'selected-item':''" @click="searchData.fileType=2;search()">视频</p>
				</div>
			</div>
			<div class="search-para uni-flex">
				<p class="para-title">
					时间:
				</p>
				<div class="para-content">
					<p class="condition-item" :class="searchData.orderbyflag=='newtimedesc'?'selected-item':''" @click="searchData.orderbyflag='newtimedesc';search()">最新</p>
					<p class="condition-item" :class="searchData.orderbyflag=='oldtimedesc'?'selected-item':''" @click="searchData.orderbyflag='oldtimedesc';search()">历史</p>
				</div>
			</div>
		</div>
		<view class="poster-list">
			<div class="poster-list-inner uni-flex flex-wrap">
				<navigator v-for="(item,index) in list" :key="index" :url="'/pages/posterdetail/posterdetail?title='+item.posterid" class="poster-item">
					<image v-if="item.fileType==1" :src="item.imgurl" class="center"></image>
					<video v-if="item.fileType==2" :src="item.imgurl" controls></video>
				</navigator>
			</div>
			<p class="tip-text" v-if="loading||searchData.pagenow==totalPage">{{loading?'正在加载中…':'没有更多了…'}}</p>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tipText:'',
				totalPage:0,
				loading:false,
				searchData:{
					pagenow: 1,
					shownum: 15,
					searchname: '',
					orderbyflag: 'newtimedesc',
					productType: 'ring',
					fileType: '',
				},
				list:[]
			}
		},
		mounted(){
			this.queryPosterList()
		},
		methods: {
			search(){
				this.searchData.pagenow=1
				this.totalPage=0
				this.queryPosterList()
				this.list=[]
			},
			onReachBottom(){
				if(this.searchData.pagenow<this.totalPage){
					this.searchData.pagenow++
					this.queryPosterList()
				}else{
					return
				}
			},
			queryPosterList(){
				this.loading=true
				this.$request.queryPosterList(this.searchData)
				.then(res=>{
					if(res.code==0){
						this.list=this.list.concat(res.objlist)
						this.totalPage=res.page.totalpage
					}else{
						
					}
					this.loading=false
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		box-sizing: border-box;
		width: 100%;
		padding: 0 30rpx;
		height:100%;
	}
	.wrap{
		width: 100%;
		height: 100%;
		position: relative;
	}
	.search-wrap{
		padding: 20rpx 40rpx 30rpx;
		box-sizing: border-box;
		width: 100%;
		height: 240rpx;
		position:fixed;
		left: 0;
		top: 0;
		z-index: 10;
		background-color: #fff;
		.search-para{
			height: 50rpx;
			line-height: 50rpx;
			margin-bottom: 20rpx;
			.para-title{
				width: 108rpx;
				font-size: 26rpx;
				color: #333;
			}
			.para-content{
				.condition-item{
					box-sizing: border-box;
					font-size: 26rpx;
					padding: 0 18rpx;
					min-width: 80rpx;
					height: 50rpx;
					background: #fff;
					border-radius: 10rpx;
					color: #333;
					text-align: center;
					float: left;
					margin-right: 40rpx;
					cursor: pointer;
				}
				.selected-item{
					background: rgb(83, 116, 247);
					color: #fff;
				}
			}
			&:last-child{
				margin-bottom: 0;
			}
		}
	}
	.poster-list{
		padding-top: 240rpx;
		width: 100%;
		.poster-list-inner{
			margin-top: -20rpx;
			margin-left: -21rpx;
			.poster-item{
				width: 216rpx;
				height: 384rpx;
				border-radius: 10rpx;
				overflow: hidden;
				margin-top: 20rpx;
				margin-left: 21rpx;
				background-color: #000;
				position: relative;
				image,video{
					display: block;
					width: auto;
					height: auto;
					max-width: 100%;
					max-height: 100%;
				}
			}
		}
		.tip-text{
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			color: #999;
			font-size: 22rpx;
		}
		
	}
</style>
